<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>PID温控测试</title>
        <link rel="stylesheet" href="style.css"/>
    </head>
    <body>
        <div id="info-panel">
            <div id="temperature-panel">
                <img src="temperature.png"/>
                <div>
                    <span>当前室温</span>
                    <span id="temperature">25.00</span>
                </div>
            </div>
            <div id="fan-panel">
                <img id="fan-picture" src="fan.png"/>
                <div>
                    <span>风扇转速</span>
                    <span id="fan-speed">0</span>
                </div>
            </div>
            <div id="heating-panel">
                <img id="heating-picture" src="fan.png"/>
                <div>
                    <span>暖气流量</span>
                    <span id="heating-flow">0</span>
                </div>
            </div>
        </div>
        <canvas id="canvas"></canvas>
        <div id="input-panel">
            <input id="target-temperature" value="25"/>℃
            <button onclick="setTargetTemperature()">设定目标温度</button>
        </div>
        <div id="control-panel">
            <button onclick="hold()">气温骤升10℃</button>
            <button onclick="cool()">气温骤降10℃</button>
        </div>
        <script src="script.js"></script>
    </body>
</html>